<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="DatetimePicker 时间选择"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="基础用法">
      <hips-datetime-picker
        title="选择时间"
        format="yyyy/MM/dd HH:mm"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="隐藏单位">
      <hips-datetime-picker
        :unit="false"
        title="选择时间"
        format="yyyy/MM/dd HH:mm"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="限定最小日期（start-date）">
      <hips-datetime-picker
        title="选择时间"
        format="yyyy-MM-dd"
        start-date="2018-5-26"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="限定最大日期 (end-date)">
      <hips-datetime-picker
        title="选择时间"
        format="yyyy-MM-dd"
        end-date="2020-5-26"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="start-date & end-date 一起使用">
      <hips-datetime-picker
        title="选择时间"
        start-date="2019-02-27 20:03:23"
        end-date="2019-02-27 23:11:23"
        format="yyyy-MM-dd HH:mm:ss"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="设置 min-year 和 max-year（可单独使用）">
      <hips-datetime-picker
        title="选择时间"
        :min-year="2016"
        :max-year="2022"
        format="yyyy-MM-dd"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="设置默认选中时间">
      <hips-datetime-picker
        title="选择时间"
        default-selected-value="2020-03-24 10:20"
        format="yyyy-MM-dd HH:mm"
        @confirm="handleConfirm1"
      />
    </demo-block>

    <demo-block title="title 插槽用法">
      <hips-datetime-picker
        title="选择时间"
        format="yyyy-MM-dd"
        @confirm="handleConfirm1"
        @custom-title="handleCustom"
      >
        <a
          slot="title"
          style="font-size: 16px"
        >clear</a>
      </hips-datetime-picker>
    </demo-block>

    <demo-block title="结合popup使用">
      <hips-button
        block
        type="primary"
        @click="show = true"
      >
        Click Me Show DatetimePicker
      </hips-button>

      <hips-popup
        v-model="show"
        position="bottom"
      >
        <hips-datetime-picker
          title="选择时间"
          format="yyyy-MM-dd"
          @confirm="handleConfirm2"
          @cancel="hidePop"
        />
      </hips-popup>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { DatetimePicker, Button, Popup } from '@hips/vue-ui';

export default {
  components: {
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Popup.name]: Popup,
  },
  mixins: [ BasicView ],
  data() {
    return {
      show: false,
    };
  },

  methods: {
    handleConfirm1(value) {
      this.$hips.toast(`选择时间: ${value}`);
    },
    handleConfirm2(value) {
      this.$hips.toast(`选择时间: ${value}`);
      this.hidePop();
    },
    handleCustom() {
      this.$hips.toast('click custom title area');
    },
    hidePop() {
      this.show = false;
    },
  },
};
</script>

<style scoped></style>
